<template>
	<orh-trees hideHandel>

		<Tree :data="trees" :load-data="loadData"  @on-select-change="getNodes" slot="trees"></Tree>

		<div class="content" slot="content">
			<Card class="info_card">
				<p slot="title">办公室信息</p>
				<Table :data="Arrange" :columns="columns1" highlight-row @on-row-click="rowRoow" :loading="loading"></Table>
			</Card>

			<Card  class="info_card">
				<p slot="title">办公人员信息</p>
				<Button type="primary" size="small" :disabled="condition.room_id == null" @click="addPernnal()">分配人员</Button>

				<Table v-if="stationInfo.length" :data="stationInfo" :columns="columns2" highlight-row :loading="tableload"></Table>
			</Card>
		</div>

		<orh-sidebar v-model="isShow" :title="titles" scale slot="others">
			<component :is="content" :condition="condition" @requery="requery"></component>
		</orh-sidebar>
	</orh-trees>
</template>

<script>
 export default {
	name: "DistributionOffice",
	layout: "menu",
	components: {
		Operation: () => import("./OpenDrawer.vue").then(m => m.default || m),
	},
	data() {
		return {
			// 当前房间
			stationInfo: [],
			tableload: true,
			loading: false,
			titles: null,
			isShow: false,
			content: 'Operation',
			Arrange: [],
			del: null,
			// 控制修改pop显示隐藏
			// 菜单树
			trees: [],
			department_id: null,

			condition: {
				depart_id: null,
				room_id: null,
				data_id: null
			},

			columns1: [
				{
					title: "部门",
					minWidth: 100,
					align: "center",
					render: (h, params) => {
						let name = params.row.department_name.zh
						return h("div", name);
					}
				},
				{
					title: "楼宇",
					minWidth: 100,
					align: "center",
					render: (h, params) => {
						let name = params.row.buildings_name.zh
						return h("div", name);
					}
				},
				{
					title: "单元",
					minWidth: 100,
					align: "center",
					render: (h, params) => {
						let name = params.row.unit_name.zh
						return h("div", name);
					}
				},
				{
					title: "楼层",
					minWidth: 100,
					align: "center",
					render: (h, params) => {
						let name = params.row.floor_name.zh
						return h("div", name);
					}
				},
				{
					title: "房间",
					minWidth: 100,
					align: "center",
					render: (h, params) => {
						let name = params.row.name.zh
						return h("div", name);
					}
				}
			],
			columns2: [
				{
					title: "教师名称",
					minWidth: 120,
					align: "center",
					render: (h, params) => {
						let name = params.row.teacher_name.zh
						return h("div", name);
					}
				},
				{
					title: "联系号码",
					minWidth: 120,
					key: "telnumber",
					align: "center"
				},
				{
					title: "操作",
					align: "center",
					width: 100,
					render: (h, params) => {
						return h("div", [
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: '您确定要删除这条数据吗?',
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                style: {
                                    textAlign: 'left',
                                },
                                on: {
                                    'on-ok': () => {
										this.remove(params.row);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, '删除')
                            ])
						]);
					}
				}
			]
		};
	},
	methods: {
		load() {
			let that = this
            that.$http.get('api/systemctl/orgDepartments/getNoPageList').then(val=>{
				console.log(val, '7777')
				that.trees = val.data.map(el => ({
					title: el.department_name.zh,
					value: el.id
				}))
            }).catch(err=>{
            })
		},
		
		// 异步加载二级部门
		loadData(item, callback) {
			// let arr = []
			// let _this = this;
			// co(function*() {
			// 	let res = yield _this.$http.get("api/user/v1/department/info?pid=" + item.id
			// );
			// res.data.forEach(val=>{
			// 	arr.push({
			// 	title :val.department_name,
			// 		value: val.id
			// 	})
			// 	//  
			// })
			// 	callback(arr);
			// }).catch(err => _this.$Message.error("子部门加载失败！"));
			callback ()
		},

		getNodes(item) {
			if (item.length) {
				this.department_id = item[0].value;
				this.loading = true;
				this.condition.room_id = null
				this.condition.depart_id = null
				this.condition.data_id = null
				this.loadStation();
			} else {
				this.Arrange = []
			}
		},
		//通过部门查询房间
		loadStation() { 
			let that = this
            that.$http.get('api/teacher/officeArrange/getDepartmentRoom/' + that.department_id).then(val=>{
				this.Arrange = val.data;
				this.loading = false;
            }).catch(err=>{
            })
		},

		rowRoow(data) {
			console.log(data, '77884455')
			this.condition.room_id = data.room_id
			this.condition.depart_id = data.department_id
			this.tableload = true;
			this.rowRoow2();
		},
		//通过房间查询房间人员
		rowRoow2 () {
			let that = this
            that.$http.get('api/teacher/officeArrangeUser/getRoomTeacher/' + that.condition.room_id).then(val=>{
				that.stationInfo = val.data
				that.tableload = false;
            }).catch(err=>{
            })
		},

		addPernnal() {
			this.titles = "分配人员"
			this.condition.data_id = null
			this.isShow = true;
		},

		update (data) {
			console.log(data, 'updata')
			this.condition.data_id = data.id
			this.titles = "修改人员"
			this.isShow = true
		},
		remove (data) {
			let that = this
			that.$http.delete('api/teacher/officeArrangeUser/delById/' + data.id).then(val=>{
				that.requery ()
			}).catch(err=>{
			})
		},

		requery() {
			this.isShow = false;
			this.tableload = true;
			this.rowRoow2();
		}
	},

	mounted () {
		this.load ()
	}
};
</script>

<style scoped>
.content {
  width: 100%;
  margin-left: 25px;
}
.info_card {
  width: 90%;
  margin-top: 25px;
}
.edit_dv {
  padding-top: 7px;
}
.edit_tag {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 7px;
}
button.ivu-btn.ivu-btn-primary.ivu-btn-small {
  position: absolute;
  right: 10px;
  top: 10px;
}
table.tatle {
  width: 100%;

  height: 50px !important;
  background: #f8f8f9;
  display: inline-table;
  padding: 7px 0 7px 0;
}
table.tatle > thead > tr > th {
  width: 25%;
}
table.tatle > thead > tr > th.admin {
  border-right: 0px;
}
table.flex-content {
  width: 100%;
}
table.flex-content > tr > td {
  width: 25%;
  text-align: center;
}
p.info_xi {
  height: 5px;
}
table.flex-content > tr {
  border-bottom: 1px solid #aaa;
  height: 40px;
}
</style>
